<template>
	<view class="sideline">
		<view class="main">
			<view class="top-nav">
				<view>
					<u-radio-group v-model="radiovalue" placement="row">
						<u-radio v-for="(item, index) in config.radiolist" :key="index" :label="item.name"
							:name="item.name" @change="()=>radioChange(item)">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="text">{{text}}</view>
			<view class="from">
				<u--form :model="model" :rules="rules" ref="uForm">
					<view class="panel">
						<u-form-item label="职称要求" prop="room_type" labelWidth="120" borderBottom
							@click="select.room_type.show=!select.room_type.show">
							<u--input v-model="model.room_type" placeholder="" disabled border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
							<u-picker :show="select.room_type.show" :columns="config.columns"
								@confirm="select.room_type.confirm($event,'room_type')"></u-picker>
						</u-form-item>
						<u-form-item label="职业年限" prop="professional_years" labelWidth="120" borderBottom>
							<view class="professional_years">
								<view>
									<u-radio-group v-model="model.professional_years" placement="column"
										@change="handleChangeProfessionalYears">
										<u-radio :customStyle="{marginBottom: '8px'}" label="不限" name="不限">
										</u-radio>
									</u-radio-group>
								</view>
								<view>
									<u--input v-model="model.professional_years_value" placeholder="请填写年限"
										border="none"></u--input>年
								</view>
							</view>
						</u-form-item>
						<u-form-item label="兼职地址" prop="address" labelWidth="120" borderBottom
							@click="select.address.open">
							<u--input v-model="model.address" placeholder="默认读取发布机构认证地址" disabled
								border="none"></u--input>
							<u-icon slot="right" name="map" color="#4cd4e6"></u-icon>
						</u-form-item>
						<u-form-item label="兼职时间" prop="datetime" labelWidth="120" borderBottom
							@click="select.datetime.show=!select.datetime.show">
							<u--input v-model="model.datetime" placeholder="08-20 08:00 至 08-30 17:30" disabled
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
							<u-datetime-picker :show="select.datetime.show" v-model="time_int" mode="datetime"
								@confirm="select.datetime.confirm($event,'datetime')"></u-datetime-picker>
						</u-form-item>
						<u-form-item label="工作时长" prop="days" labelWidth="120" borderBottom>
							<u--input v-model="model.days" placeholder="" border="none"></u--input>
							<u-icon slot="right" name="arrow-right">
								<template #before>元</template>
							</u-icon>
						</u-form-item>

						<u-form-item label="薪资" prop="price" labelWidth="120" borderBottom>
							<u--input v-model="model.price" placeholder="薪资" border="none"></u--input>
							<u-icon slot="right" name=" ">
								<template #before>元</template>
							</u-icon>
						</u-form-item>
						<u-form-item label="发布个数" prop="quantity" labelWidth="120">
							<u--input v-model="model.quantity" placeholder="请填写发布个数" border="none"></u--input>
							<u-icon slot="right" name=" ">
								<template #before>个</template>
							</u-icon>
						</u-form-item>
					</view>
					<view class="panel label">
						<u-form-item label="工作内容" prop="content" labelWidth="120" labelPosition="top">
							<u--textarea v-model="model.content" placeholder="请详细描述您要招募的服务工作内容、工作要求等内容，以便医兼能够充分了解。" count
								maxlength="500"></u--textarea>
						</u-form-item>
						<u-form-item label="执业范围" prop="content" labelWidth="120" labelPosition="top">
							<u--textarea v-model="model.content" placeholder="请详细描述执业要求" count
								maxlength="200"></u--textarea>
						</u-form-item>
					</view>
				</u--form>
			</view>
		</view>
		<view class="bottom">
			<view class="left">
				总金额￥<text>59.8</text>
			</view>
			<view class="right" @click="handleClickConfirm">发布</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiovalue: '医师类',
				text: "兼职超过30天建议:多点注册或者多机构备案等等。",
				config: {
					radiolist: [{
							name: '医师类',
							disabled: false
						},
						{
							name: '护士类',
							disabled: false
						},
						{
							name: '康复类',
							disabled: false
						}, {
							name: '药学类',
							disabled: false
						}, {
							name: '检验类',
							disabled: false
						}, {
							name: '其它职称',
							disabled: false
						}
					]
				},
				model: {
					room_type: "初级师及其以上", //职称及机构要求
					professional_years: "",
					professional_years_value: "",
					datetime: "", //预约时间
					address: "", //预约地址
					days: "30", //工作时长
					price: " ", //费用
					content: "", //备注
					remarks: "", //备注
				},
				rules: {
					room_type: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					datetime: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					fare: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
					price: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}],
				},
				select: {
					room_type: {
						show: false,
						confirm: (item, key) => {
							this.model[key] = item.value[0];
							this.select[key].show = !this.select[key].show;
						}
					},
					datetime: {
						show: false,
						formatter: "yyyy-mm-dd hh:MM:ss",
						confirm: (item, key) => {
							this.model[key] = uni.$u.timeFormat(item.value, "yyyy-mm-dd hh:MM:ss");
							this.select[key].show = !this.select[key].show;
						}
					},
					address: {
						show: false,
						open: () => {
							uni.chooseLocation({
								success: (res) => {
									this.model.address = res.name || res.address;
									// this.$emit("confirm", res);
									console.log('位置名称：' + res.name);
									console.log('详细地址：' + res.address);
									console.log('纬度：' + res.latitude);
									console.log('经度：' + res.longitude);
								}
							});
						}
					}
				},
				time_int: Number(new Date())
			};
		},
		methods: {
			handleChangeProfessionalYears() {

			},
			handleClickConfirm() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
				console.log("confirm");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sideline {
		.main {
			padding: 24rpx;
			background-color: $page-color-base;

			.top-nav {
				>view {
					background-color: #FFF;
					padding: 24rpx;
					border-radius: 16rpx;
					overflow: hidden;
				}

				::v-deep .u-radio-group {
					flex-wrap: wrap;

					.u-radio {
						width: 33.33%;
						margin: 10rpx 0;
					}
				}
			}

			.text {
				font-size: 24rpx;
				font-weight: 400;
				line-height: 31.82rpx;
				color: rgba(152, 160, 166, 1);
				padding-left: 30rpx;
				margin: 24rpx 0;
			}

			.from {
				.label{
					::v-deep .u-form-item__body__left__content__label{
						// color:red !important;
						margin-bottom: 24rpx;;
					}
				}
				.panel {
					background-color: #FFF;
					padding: 0 24rpx 24rpx;
					border-radius: 16rpx;
					overflow: hidden;
					margin-bottom: 24rpx;

					::v-deep .u-input__content__field-wrapper {
						width: max-content;

						.input-placeholder {
							text-align: right !important;
							background-color: #FFF !important;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(54, 68, 79, 1);
						}

						.u-input__content__field-wrapper__field {
							text-align: right !important;
							background-color: #FFF !important;
						}
					}

					.professional_years {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						>view {
							width: 50%;
							display: flex;
							align-items: center;
						}

						::v-deep .u-input__content__field-wrapper {
							width: 100rpx !important;
						}
					}
				}

			}
		
			
		}
		.bottom {
			position: absolute;
			button: 0;
			left: 0;
			height: 136rpx;
			width: 100%;
			background-color: #FFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.left {
				color: rgba(255, 140, 64, 1);
				font-size: 28rpx;
				font-weight: 400;
				margin-left: 5rpx;
		
				>text {
					font-size: 40rpx;
					font-weight: 600;
				}
			}
		
			.right {
				border-radius: 24rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFF;
				width: 288rpx;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $theme-color;
				margin: 24rpx;
			}
		}

	}
</style>